<template>
	<view class="refundSales-contanier">
		<view class="refund-content">
			<view class="module detials">
				<view class="title">退款信息</view>
				<view class="detials-content">
					<view class="item" v-if="type==10">
						<view class="text">货物状态<text class="symbol">*</text></view>
						<view class="icon-content" @click="sheetChange('status')">
							<text style="font-size: 28rpx;margin-right: 10rpx;">{{form.status.name||'请选择'}}</text>
							<unt-icon name="icon-arrow" size="12" color="#999999"></unt-icon>
						</view>
					</view>
					<view class="item">
						<view class="text">退款原因<text class="symbol">*</text></view>
						<view class="icon-content" @click="sheetChange('reason')">
							<text style="font-size: 28rpx;margin-right: 10rpx;">{{form.reason.name||'请选择'}}</text>
							<unt-icon name="icon-arrow" size="12" color="#999999"></unt-icon>
						</view>
					</view>
					<view class="item">
						<view class="text">商品件数<text class="symbol">*</text></view>
						<u-number-box button-size="20" v-model="form.goodsNum" @change="valChange"
							:disabled="true"></u-number-box>
					</view>
					<view class="item">
						<view class="text">退款金额<text class="symbol">*</text></view>
						<view class="price-text">¥{{order.payPrice}}</view>
					</view>
				</view>
			</view>
			<view class="module service-type">
				<view class="title">补充描述和原因</view>
				<view class="type-content">
					<u--textarea v-model="form.descr" placeholder="补充描述,有助于商家更好的描述..." border="none" autoHeight count
						maxlength="200"></u--textarea>
					<view class="image-upload">
						<u-upload accept="image,video" :fileList="form.fileList" @afterRead="afterRead"
							@delete="deletePic" name="1" multiple :maxCount="10" uploadText="上传凭证"
							:previewFullImage="true"></u-upload>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 操作菜单 start -->
		<u-action-sheet :show="sheet.show" @close="sheet.show = false" :title="sheet.title" :round="10">
			<view class="reason-list">
				<view class="list-content">
					<view class="item" v-for="(item,index) in sheet.list" :key="index">
						<view class="item-name">{{item.name}}</view>
						<radio :checked="sheet.checkedIds==item.id" @click="handleCheckItem(item)"></radio>
					</view>
				</view>
				<view class="btn determine" @click="sheet.show=false">确定</view>
			</view>
		</u-action-sheet>
		<!-- 弹窗 操作菜单 end -->
		<view class="bottom-fixed submint-content">
			<view class="submint-btn" @click="SubRefundData">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		refundStatus,
		refundReason
	} from '@/common/enum/refund'
	import * as Refund from '@/api/refund'
	import * as UploadApi from '@/api/upload'
	export default {
		props: ['type', 'order', 'goodsId'],
		data() {
			return {
				refundStatus,
				refundReason,
				sheet: {
					text: "status",
					title: "货物状态",
					show: false,
					checkedIds: 0,
					list: []
				},
				form: {
					status: {},
					reason: {},
					descr: '',
					goodsNum: 1,
					fileList: []
				},
			}
		},
		methods: {
			SubRefundData() {
				const files = this.form.fileList.map(obj => {
					return {
						name: obj.name,
						originalName: obj.originalName,
						url: obj.url,
						imageId: obj.id
					};
				});
				const data = {
					orderId: this.order.orderId,
					orderNo: this.order.orderNo,
					orderGoodsId: this.goodsId,
					userId: this.order.user.userId,
					type: this.type,
					applyDesc: this.form.descr,
					isUserSend: this.form.status.value ? this.form.status.value : 20,
					imageList: files
				};
				if (this.checkDataFields(data)) {
					Refund.create(data).then(res => {
						this.$unts.success(res.message,()=>uni.navigateBack({
							delta: 1
						}));
						
					});
				} else {
					this.$unts.toast("请检查是否有信息没有填写！");
				}
			},
			checkDataFields(data) {
				for (let key in data) {
					if (data[key] === undefined || data[key] === null || data[key] === '') {
						return false;
					}
				}
				return true;
			},
			sheetChange(text) {
				if (text == "status") {
					this.sheet.text = text;
					this.sheet.title = '货物状态';
					this.sheet.show = true;
					this.sheet.list = this.refundStatus.data;
				} else if (text == "reason") {
					this.sheet.text = text;
					this.sheet.title = '退款原因';
					this.sheet.show = true;
					this.sheet.list = this.form.status.value == 20 || this.type == 20 ? this.refundReason.DID.value : this
						.refundReason.CEASE.value;
				}
			},
			handleCheckItem(v) {
				const text = this.sheet.text;
				if (text == "status") {
					this.form.status = v;
				} else if (text == "reason") {
					this.form.reason = v;
				}
				this.sheet.checkedIds = v.id;
			},
			valChange() {

			},
			// 图片上传选择 start
			// 删除图片
			deletePic(event) {
				UploadApi.deleteImage({
					url: event.file.url
				}).then(res => {
					console.log(res)
				}).catch()
				this.form.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.fileList.length
				lists.map((item) => {
					this.form.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise([{
						'size': lists[i].size,
						"path": lists[i].url
					}])
					let item = this.form.fileList[fileListLen]
					this.form.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '上传成功',
						...result[0].data
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					UploadApi.image(url).then(res => {
						resolve(res)
					}).catch(reject)
				})
			},
			// 图片上传选择 end
		},
		computed: {
			goodsCheck() {
				return function(val, ids) {
					return uni.$unt.inArray(val, ids);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.refundSales-contanier {
		width: 100%;

		.module {
			width: 100%;
			background: #fff;
			padding: 20rpx;
			border-radius: 25rpx;
			margin-top: 30rpx;

			.title {
				margin-bottom: 20rpx;
				font-weight: 600;
				font-size: 30rpx;
			}

			.type-content {
				margin-top: 50rpx;

				.item {
					display: flex;
					justify-content: flex-start;
					margin-bottom: 50rpx;

					.text {
						margin-left: 15rpx;
					}
				}
			}
		}

		.refund-content {
			width: 100%;
			margin-bottom: 150rpx;

			.detials-content {
				margin-top: 50rpx;

				.item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 50rpx;
				}

				.text {
					.symbol {
						color: #E96133;
					}
				}

				.price-text {
					color: #E96133;
					font-size: 28rpx;
				}
			}

			.image-upload {
				margin-top: 20rpx;
			}
		}

		// 
		.reason-list {
			padding: 20rpx;
			max-height: 85vh;
			min-height: 50vh;
			position: relative;
			overflow: hidden;

			.list-content {
				overflow-y: auto;
				max-height: calc(80vh - 120rpx);
				min-height: calc(50vh - 120rpx);
				margin-bottom: 120rpx;
			}

			.item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0px;
				border-bottom: 1px solid #ccc;
			}

			.item:last-of-type {
				border-bottom: none;
			}

			.determine {
				width: calc(100% - 40rpx);
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
				background: linear-gradient(to right, #01ab63, #09BF09);
				text-align: center;
				color: #fff;
				padding: 20rpx 30rpx;
				border-radius: 200rpx;
			}
		}

		.submint-content {
			padding: 20rpx;

			.submint-btn {
				width: 100%;
				background: linear-gradient(to right, #01ab63, #09BF09);
				text-align: center;
				color: #fff;
				padding: 20rpx 30rpx;
				border-radius: 200rpx;
				justify-content: center;
				letter-spacing: 10rpx;
			}
		}
	}
</style>